<template>
  <h1 @click="$router.back()">我是detail, 我要播放{{ filmId }}编号的电影</h1>
  <h3 @click="toDetail">猜你喜欢</h3>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import useTabbarStore from "../store/setupStore/tabbarStore";

const tabbarStore = useTabbarStore();

const route = useRoute();
const router = useRouter();

const filmId = ref(route.params.filmId);
const toDetail = () => {
  router.push(`/detail/1132`);
};

onMounted(() => {
  // 第一种通过vue组件修改pinia中数据的方式就是这种直接赋值的形式，注意这里和vuex还是有区别的，vuex是store.state.xxx，而pinia直接store.xxx就可以拿到
  tabbarStore.isTabbarShow = false;
});

onUnmounted(() => {
  // 第二种方式就是调用$patch方法，将要修改的所有属性搞成一个对象然后放进去即可，这里因为我们这个组件只用到了isTabbarShow，所以对象里只有一个属性。如果要修改的属性多，就用这个方式，少的话就用上面直接赋值的方式
  // tabbarStore.$patch({
  //   isTabbarShow: true,
  // });

  // 当然，pinia当然也提供了actions的，不过调用的方式和vuex不同，pinia中直接store.xxx就可以调用actions里面的方法了，不像vuex还要通过dispatch
  tabbarStore.changeTabbarShow(true);

  // pinia也提供了一个$reset方法，就是把你在state中定义的属性都重置为初始值，就是你在state里面定义他们时候的值
  // tabbarStore.$reset();
});

onBeforeRouteUpdate((to, from) => {
  console.log(to, from);
  filmId.value = to.params.filmId;
});
</script>

<style lang="scss" scoped>
</style>